<template>
  <el-dialog
    destroy-on-close
    title="委派人完成"
    :visible.sync="show"
    width="500px"
    v-bind="$attrs"
    v-on="$listeners"
    append-to-body
    @close="handleCancel"
    :close-on-click-modal="false"
  >
  <j-form-container>
    <a-form-model ref="formRef" :model="formValue" :rules="validatorRules" slot="detail">
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="委派意见" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="comments">
            <a-textarea v-model="formValue.comments" placeholder="请输入委派意见" :auto-size="{ minRows: 4, maxRows: 5 }" />
          </a-form-model-item>
        </a-col>
        </a-row>
        <a-col :span="24">
          <a-form-model-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="imageList">
            <j-image-upload v-model="formValue.imageList" :isMultiple = "true" @change="imgChange"></j-image-upload>
            <div class="el-upload__tip">添加图片 | 每张图不超过10MB</div>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="附件" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fileList">
            <j-upload v-model="formValue.fileList" @change="fileChange"></j-upload>
            <div class="el-upload__tip">添加附件 | 单个附件不超过100MB</div>
          </a-form-model-item>
        </a-col>
    </a-form-model>
  </j-form-container>
    <template #footer>
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="handleConfirm">提 交</el-button>
    </template>
  </el-dialog>
</template>

<script>
 import { httpAction} from '@/api/manage'
export default {
  name: "ResolveModal",
  components: {  },
  props: {
    // 是否显示
    visible: {
      type: Boolean,
      default: false,
    },
    processInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: false,
      formValue: {
        comments: "",
        imageList:'',
        fileList: '',
      },
      imageList: [],  //图片列表
      fileList: [],  //文件列表
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      validatorRules:{},
      url:{
        resolveTask:'workspace/resolveTask'
      }
    };
  },
  computed: {
    show: {
      get() {
        return this.visible;
      },
      set(visible) {
        this.$emit("update:visible", visible);
      },
    },
  },
  methods: {
    
    //上传图片
    imgChange(value){
      if(value){
        let list = value.split(',')
        list.map((item)=>{
          let lastOf = item.lastIndexOf('/') // '/'所在的最后位置
          const name = item.substr(lastOf + 1) //截取文件名称和后缀
          this.imageList.push({name:name, url:item})
        })
      }else{
        this.imageList = []
      }
    },
    //上传文件
    fileChange(value){
      if(value){
        let list = value.split(',')
        list.map((file)=>{
          let lastOf = file.lastIndexOf('/') // '/'所在的最后位置
          const name = file.substr(lastOf + 1) //截取文件名称和后缀
          this.fileList.push({name:name, url:file})
        })
      }else{
        this.fileList = []
      }
    },
    // 确认操作
    handleConfirm() {
      this.$refs.formRef.validate((valid) => {
        if (!valid) return;
        const { imageList, fileList, ...restParams } = this.formValue;
        const params = {
          ...this.processInfo,
          ...restParams,
          attachments: [...this.imageList, ...this.fileList],
        };
        this.loading = true;
        httpAction(this.url.resolveTask,params,'post')
          .then((res)=>{
            if(res.success){
              this.$message.success(res.message)
              this.handleCancel();
              this.$emit("success");
            }else{
              this.$message.warning(res.message)
            }
          })
          .finally(() => {
              this.loading = false;
            });
      });
    },
    // 取消操作
    handleCancel() {
      this.$refs.formRef.resetFields();
      this.formValue = {
        comments: "",
        imageList: [],
        fileList: [],
      };
      this.show = false;
    },
  },
};
</script>
<style lang="less" scoped>
  .el-upload__tip {
    font-size: 12px;
    color: #606266;
  }
  /deep/.ant-upload.ant-upload-select-picture-card {
    margin-bottom: 0;
  }
</style>
